<template>

 
 <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">主页面</el-breadcrumb-item>
          <el-breadcrumb-item>牛场管理</el-breadcrumb-item>
          <el-breadcrumb-item>牛的基本信息管理</el-breadcrumb-item>
         </el-breadcrumb>
  <el-divider/>

  <el-descriptions title="基本信息" :column="3" border>

    <!-- 牛的耳号 -->

    <el-descriptions-item label="牛的耳号">

      <el-input v-model="cattle.cattleId" style="width: 220px" placeholder="请输入耳号" clearable />

    </el-descriptions-item>

    <!-- 牛的品种号 -->

    <el-descriptions-item label="牛的品种号">

      <el-input v-model="cattle.breedId" style="width: 220px" placeholder="请输入品种号" clearable />

    </el-descriptions-item>

    <!-- 出生日期 -->

    <el-descriptions-item label="出生日期">

      <el-date-picker v-model="cattle.birthday" type="date" placeholder="请选择日期" />

    </el-descriptions-item>

    <!-- 重量 -->

    <el-descriptions-item label="重量">

      <el-input v-model="cattle.weight" style="width: 220px" placeholder="请输入重量" clearable />

    </el-descriptions-item>

    <!-- 牛的性别 -->

    <el-descriptions-item label="牛的性别">

      <el-select v-model="cattle.sex" clearable placeholder="请选择性别" style="width: 220px">

        <el-option

          v-for="item in sex_list"

          :key="item.value"

          :label="item.label"

          :value="item.value"

        />

      </el-select>

    </el-descriptions-item>

    <!-- 检疫情况 -->

    <el-descriptions-item label="检疫情况">

      <el-input v-model="cattle.quarantineSituation" style="width: 220px" placeholder="请输入检疫情况" clearable />

    </el-descriptions-item>

    <!-- 备注 -->

    <el-descriptions-item label="备注">

      <el-input v-model="cattle.remark" style="width: 220px" placeholder="备注" clearable />

    </el-descriptions-item>

  </el-descriptions>

  <el-divider/>
  <!-- 添加按钮 -->

  <el-button type="primary" round @click="insertCattle"  >添加</el-button>
  <el-button type="primary" round @click="deleteCattle" >删除</el-button>

   

</template>


<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';
import { ElMessage } from 'element-plus'



const urlParams = new URLSearchParams(window.location.search);
let  cattleId= urlParams.get('cattleId')

const cattle = ref({
 
  cattleId: cattleId,

  breedId: '',

  birthday: '', // 初始化为''

  weight: '',

  sex: '',

  quarantineSituation: '',

  remark: '',

});
let sex_list = [

  {

    value: '母',

    label: '母',

  },

  {

    value: '公',

    label: '公',

  }

];


function refresh() {
    location.reload();
  }

function insertCattle() {

  axios.post("http://localhost:8080/cattle/insertCattle", cattle.value)

    .then(function (response) {

      console.log(response.data);
      

    })

    .catch(function (error) {

      console.error(error);

    });

    refresh();
}
function deleteCattle(){

    axios.get("http://localhost:8080/cattle/deleteCattle?cattleId="+cattle.value.cattleId).then(function (response) {
    cattle.value.cattleId = response.data
    refresh();

    
  })
}


</script>